<!-- 列表 -->
<template>
	<view class="list">
		<view class="list-item" v-for="value in 3" :key="value">
			<view class="header">
				<image class="avatar" src="/pagesC-shopping/static/images/will-delete/09.png" mode="aspectFill"></image>
				<view class="info">
					<view class="top">
						<text class="name">秋天的童话</text>
						<text class="iconfont star active">&#xe618;</text>
						<text class="iconfont star active">&#xe618;</text>
						<text class="iconfont star active">&#xe618;</text>
						<text class="iconfont star active">&#xe618;</text>
						<text class="iconfont star">&#xe618;</text>
						<text class="score">8.0</text>
					</view>
					<view class="bottom">
						<text class="combo">规格：500ml</text>
						<text class="datetime">09-26 15:23</text>
					</view>
				</view>
			</view>
			<view class="body">
				<text class="remark">发货的速度非常快，蚂蚁药效果也不错，买过很多次。撒了半包，已经有半个月没见到蚂蚁了。</text>
				<view class="pic-grid">
					<view class="grid-item">
						<image class="pic" src="/pagesC-shopping/static/images/will-delete/10.png" mode="aspectFill"
							@click="handlePreviewImage('/pagesC-shopping/static/images/will-delete/10.png')">
						</image>
					</view>
					<view class="grid-item">
						<image class="pic" src="/pagesC-shopping/static/images/will-delete/11.png" mode="aspectFill"
							@click="handlePreviewImage('/pagesC-shopping/static/images/will-delete/11.png')">
						</image>
					</view>
					<view class="grid-item">
						<image class="pic" src="/pagesC-shopping/static/images/will-delete/12.png" mode="aspectFill"
							@click="handlePreviewImage('/pagesC-shopping/static/images/will-delete/12.png')">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const handlePreviewImage = (url) => {
		uni.previewImage({
			urls: [url]
		});
	}
</script>

<style lang="scss" scoped>
	.list {
		&-item {
			background-color: white;
			padding: 0 30rpx 30rpx;
			margin-top: 20rpx;
		}
	}

	.header {
		display: flex;
		align-items: center;
		padding: 28rpx 0;

		.avatar {
			flex-shrink: 0;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
		}

		.info {
			flex-grow: 1;
			padding-left: 20rpx;

			.top {
				display: flex;
				align-items: center;

				.name {
					flex-grow: 1;
					display: block;
					font-weight: 500;
					font-size: 26rpx;
					color: #222222;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.star {
					flex-shrink: 0;
					font-size: 22rpx;
					color: #E6E5E5;

					&+.star {
						margin-left: 7rpx;
					}

					&.active {
						color: #FCC002;
					}
				}

				.score {
					flex-shrink: 0;
					font-size: 22rpx;
					color: #222222;
					margin-left: 17rpx;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.combo {
					font-size: 22rpx;
					color: #999999;
				}

				.datetime {
					font-size: 22rpx;
					color: #999999;
				}
			}
		}
	}

	.body {
		.remark {
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;
		}

		.pic-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			column-gap: 20rpx;
			margin-top: 20rpx;

			.grid-item {
				position: relative;
				padding-bottom: 100%;

				.pic {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>